import streamlit as st


import requests
from requests.packages.urllib3.exceptions import InsecureRequestWarning

# 服务器的API端点
API_URL = "https://gateway.docker.internal:7414/api/app/FlowText/CreateFlowingText"

# 左侧控制面板中已有的属性值
# 假设这些变量是之前定义好的，并且可能通过其他方式在应用中被赋值
# 比如使用st.session_state来跨回调保持状态
title = "示例标题"
direction = "向左"
speed = 10
text_color = "#FFFFFF"
font_size = 14
texts = "这里是流动的文本示例"

# 请求时不验证SSL证书
requests.packages.urllib3.disable_warnings(InsecureRequestWarning)
# 定义函数来发送POST请求
# 定义函数来发送POST请求
def post_data_to_server(title, direction, speed, text_color, font_size, texts):
    data = {
        "title": title,
        "marqueeDirection": direction,
        "marqueeSpeed": speed,
        "textColor": text_color,
        "fontSize": font_size,
        "marqueeTexts": texts
    }


    headers = {
        'accept': 'text/plain',
        'Content-Type': 'application/json'
    }
    # 在这里添加了 verify=False 来关闭SSL证书验证
    response = requests.post(API_URL, headers=headers, json=data, verify=False)
    return response.status_code


# 在左侧控制面板添加一个按钮，而不是增加新的控件
if st.sidebar.button("保存当前值"):
    status_code = post_data_to_server(title, direction, speed, text_color, font_size, texts)

    if status_code in (200, 201):
        st.sidebar.success("数据已经发送到服务器并保存成功！")
    else:
        st.sidebar.error(f"发送失败，错误码: {status_code}")

















# 初始化streamlit session state以保存用户输入的标题和其他设置
if 'page_title' not in st.session_state:
    st.session_state.page_title = ''  # 默认标题为空
if 'marquee_texts' not in st.session_state:
    st.session_state.marquee_texts = []
if 'marquee_direction' not in st.session_state:
    st.session_state.marquee_direction = '上下'  # 默认滚动方向为上下

# 设置默认字体颜色和背景颜色
default_text_color = "#FF0000"  # 红色文本
default_bg_color = "#000000"  # 黑色背景

# 新定义一个用于显示流动文本的函数，支持不同方向
def marquee(marquee_texts, text_color, bg_color, font_size, speed, direction):
    combined_text = "<br>".join(marquee_texts) if direction == '上下' else "     ".join(marquee_texts)  # 上下方向用换行，左右方向用空格分隔
    animation_type = 'verticalMarquee' if direction == '上下' else 'horizontalMarquee'
    marquee_style = f"""
        .marquee {{
            position: relative;
            height: auto;  /* 改变高度为自动，以适应内容 */
            overflow: hidden;
            background-color: {bg_color};
            color: {text_color};
            font-size: {font_size}px;
            animation: {animation_type} {speed}s linear infinite;
        }}
        @keyframes verticalMarquee {{
            0% {{ transform: translateY(100%); }}
            100% {{ transform: translateY(-100%); }}
        }}
        @keyframes horizontalMarquee {{
            0% {{ transform: translateX(100%); }}
            100% {{ transform: translateX(-100%); }}
        }}
        .marquee.horizontal {{
            width: 100%;
            white-space: nowrap;  /* 仅在水平滚动时防止文本断行 */
        }}
    """

    marquee_class = 'marquee ' + ('horizontal' if direction == '左右' else '')

    # 应用样式
    st.markdown(f"""
        <style>
        {marquee_style}
        </style>
        <div class="{marquee_class}">{combined_text}</div>
    """, unsafe_allow_html=True)


# 设置控制面板显示样式
st.markdown(f"""
    <style>
    .sidebar .block-container{{
        background-color: {default_bg_color};
        color: {default_text_color};
    }}
    .main .block-container{{
        background-color: {default_bg_color};
        color: {default_text_color};
    }}
    </style>
    """,
    unsafe_allow_html=True
)

# 控制面板区域，用于接受新的流动文本和自定义页面标题。
with st.sidebar:
    st.title("控制面板")
    # 输入新的页面标题
    page_title_input = st.text_input("输入页面标题", value=st.session_state.page_title)
    if st.button("更新标题"):
        st.session_state.page_title = page_title_input

    # 选择滚动方向
    direction = st.selectbox("选择字幕方向", ["上下", "左右"], index=0 if st.session_state.marquee_direction == "上下" else 1)

    # 文本动画速度
    speed = st.slider("设置流动速度（秒）", min_value=3, max_value=60, value=10)
    # 文本颜色
    text_color = st.color_picker("设置文本颜色", value=default_text_color)
    # 字体大小
    font_size = st.slider("设置字体大小（像素）", min_value=14, max_value=36, value=20)
    # 输入新的流动字幕内容
    user_input = st.text_input("输入新的流动字幕内容")
    if st.button("添加字幕"):
        if user_input.strip() != "":
            st.session_state.marquee_texts.append(user_input)

    # 更新用户选择的滚动方向
    if direction != st.session_state.marquee_direction:
        st.session_state.marquee_direction = direction

# 页面标题使用用户输入的标题
if st.session_state.page_title:
    st.title(st.session_state.page_title)

# 调用 marquee 函数在前端展示流动的字幕
marquee(st.session_state.marquee_texts, text_color, default_bg_color, font_size, speed, st.session_state.marquee_direction)